8 .Vue-2

vue 自學筆記

伍貳捌 2023-10-05 22:43:04 ‧ 266 瀏覽

分享至

(一)
Vue.js 的實體物件: 透過new Vue()或Vue.createApp()得到新物件，並指定變數名稱，透過此物件來掛載在網頁上的某個 DOM 節點，即可控制網頁節點對應的內容。
(二) 創建一個基本的Vue應用程序

引入Vue庫: 您需要在HTML文件中引入，也可以使用CDN，或是或使用官方的Vue CLI樣板工具來創建。

<html>
 <head></head>
 <body>  <!--開發環境版本，包含有幫助的命令執行黨-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 
<!--生產版本--> <script src="https://cdn.jsdelivr.net/npm/vue"></script> 
</body> </html>

創建HTML結構: 在HTML文件中創建Vue應用程序的HTML結構。

<div id="app">
{{ message }}  <!--兩個大括號 =>差值表達式:將數據與關連結構關聯起來-->
</div>

創建Vue實例: 在JavaScript中，創建一個Vue實例，並將其與HTML中的元素進行綁定。

<script>
        var app= new Vue({
            el:"#app", //# ->id選擇器，將Vue實例與id為"app"的HTML元素綁定
            data:{ //使用到的數據、值
                message:"Hello World! "
            } //把message的值渲染到html的message
        })
</script>

在這裡我們創建了一個Vue實例，並將其與元素進行綁定。在data屬性中定義了一個名為message的變數，它的值為" Hello World! "。然後在HTML中，使用了{{ message }}語法，它將會動態地顯示message變數的值。

(三)
el ( element )：要綁定的DOM element
-用來指定 Vue 實例應該掛載到哪個 DOM 元素的選項
-可以使用其他選擇器，但建議此用id選擇器
-可以使用雙標籤，但不能使用HTML和body
data：要綁定的資料

Vue中用到的數據定義在data中，並且當數據變化時，Vue 會自動更新 DOM
data:數據對象如: message、araay:[]、obi:{}

<div id="student">
    {{message}} <br>
    名字:{{school.name}}<br>
    電話:{{school.phone}}<br>
    位於:{{location[0]}}<br>
   </div>
<script>
       var student=new Vue({
        el:"#student",  
        data:{
            message:"基本資訊",
            school:{
                name:"王曉明",
                phone:"0965417823"
            },
            location:["台南市","新北市"]
        }
       })
    </script>

參考:
1.https://book.vue.tw/CH1/1-2-instance.html
2.https://ithelp.ithome.com.tw/articles/10198843